<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let state=false  //定义灯的初始状态
			function turn(){
				//用选择器去获得图像和文本元素
				let img =document.querySelector(".con>img")
				let h1 =document.querySelector(".con>img+h1")
				if(state){
					img.setAttribute("src","../../../src/off.png")
					h1.innerHTML="灯灭了！"//inneerText  textContent(三个可以修改文本)
					h1.setAttribute("style","color:black;")
					state=false;
				}
				else {
					img.setAttribute("src","../../../src/on.png")
					h1.innerHTML="灯亮了！"
					h1.setAttribute("style","color:yellow;")
					state=true;
	
				}
				//记录次数,偶数开灯,奇数关灯
				//读取页面的状态
				//读取灯的地址off/on
			}
		</script>
		
	</head>
	<body>
		<div class="con" style="text-align: center;" onclick="turn()">
			<img src="../../../src/off.png" width="200px" >
			<h1>点击开灯</h1>
		</div>
	</body>
</html>
